<!--
 * @Description: GRE隧道列表
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-11-01 14:27:45
 * @LastEditTime: 2021-11-04 08:57:08
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content" style="padding: 0">
    <template v-if="show === 0">
      <div class="table-top">
        <!-- 刷新 -->
        <el-button size="medium" plain @click="refresh">刷新</el-button>
        <!-- 新建 -->
        <el-button size="medium" type="primary" plain @click="handleCreate" v-power="2">新建</el-button>
      </div>
      <tao-table
        class="table-box"
        :data="dataList"
        :page="page"
        @changePage="changePage"
        :showPage="true"
        ref="table"
      >
        <el-table-column label="ID" align="center" width="100" sortable prop="id" />
        <el-table-column label="隧道号" min-width="200" prop="tunnelNo" />
        <el-table-column label="模式" align="center" width="150" prop="mode">
          <template slot-scope="scope">
            <span v-if="scope.row.attrs.mode ==='IPv4'">IPv4</span>
            <span v-if="scope.row.attrs.mode ==='IPv6'">IPv6</span>
          </template>
        </el-table-column>
        <el-table-column label="源模式" width="150" align="center" prop="sourceMode">
          <template slot-scope="scope">
            <span v-if="scope.row.sourceMode === 'IPv4'">IPv4</span>
            <span v-if="scope.row.sourceMode === 'IPv6'">IPv6</span>
            <span v-if="scope.row.sourceMode === 'Interface'">源接口</span>
          </template>
        </el-table-column>
        <el-table-column label="源地址" min-width="150" align="center" prop="sourceMode">
          <template slot-scope="scope">
            <span v-if="scope.row.srcAddr">{{scope.row.srcAddr}}</span>
            <span v-if="scope.row.extAttrs.intfName">{{scope.row.extAttrs.intfName.toUpperCase()}}</span>
          </template>
        </el-table-column>
        <el-table-column label="目的地址" width="150" align="center" prop="sourceMode">
          <template slot-scope="scope">
            <span>{{scope.row.destAddr ? scope.row.destAddr : '-'}}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" label="操作" width="160px">
          <!-- 编辑 删除-->
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              v-power="ne.dgId === 100000 ? 0 : 2"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-power="ne.dgId === 100000 ? 0 : 2"
            >删除</el-button>
          </template>
        </el-table-column>
      </tao-table>
    </template>
    <forms
      :ne="ne"
      :type="type"
      :dialogStatus="dialogStatus"
      :row="greInfo"
      :portList="portList"
      @handleDialog="handleDialog"
    ></forms>
  </div>
</template>
<script>
import forms from './forms.vue';
export default {
  props: ['ne'],
  components: {
    forms
  },
  data () {
    return {
      dataList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      type: 'create',
      dialogStatus: false,
      packetsInfo: {},
      portList: [],
      portData: [],
      show: 0,
      greInfo: {}
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  methods: {
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 新建
    handleCreate () {
      let _this = this;
      _this.type = 'create';
      _this.greInfo = {};
      _this.dialogStatus = true;
    },
    // 编辑
    handleEdit (row) {
      let _this = this;
      _this.type = 'edit';
      _this.greInfo = row;
      _this.dialogStatus = true;
    },
    // 新建、编辑的回调
    handleDialog (data) {
      let _this = this;
      _this.type = 'create';
      // _this.show = 0;
      _this.dialogStatus = data;
    },
    // 刷新
    refresh () {
      let _this = this;
      _this.dataList = [];
      _this.$http.post({
        url: '/api/resource/nemng/confobjs/' + _this.ne.id,
        data: {
          tid: 'nbf.res.vpn.gre'
        }
      }).then(res => {
        if (res) {
          _this.dataList = res;
        }
      });
    },
    // 删除
    handleDelete (row) {
      let _this = this;
      let params = {
        commandCode: 'vpn.gretunnel.set',
        paras: {
          removes: [row.oid]
        }
      };
      this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        _this.$http.post({
          url: '/api/resource/nemng/command/' + _this.ne.id,
          data: params
        }).then(res => {
          if (res) {
            _this.$message.success('删除成功！');
            _this.refresh();
          }
        });
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  .table-top {
    margin-bottom: 15px;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
}
</style>
